<template>
  <div>
    <!-- 面包屑导航 -->
    <BreadCrumb></BreadCrumb>
    <!-- 产品搜索 -->
    <!-- 信息说明 -->
    <div class="header">
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="订单号">
            <el-input v-model="formInline.name" size="small" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker v-model="formInline.date" size="small" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="group">
        <!-- <el-button size="small" type="warning" icon="el-icon-plus" @click="toProductPage">添加商品</el-button> -->
        <el-button size="small" type="danger" icon="el-icon-delete">批量删除</el-button>
      </div>
    </div>
    <!-- 产品列表 -->
    <div class="content">
      <el-table
      :data="tableData"
      @select="selectHandle"
      @select-all="selectHandle"
      style="width: 100%" stripe border :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column
      align="center"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
      sortable
      align="center"
        prop="orderTime"
        label="下单时间"
        width="180">
      </el-table-column>
      <el-table-column
      sortable
      align="center"
        prop="number"
        label="订单号"
        width="130">
        <template slot-scope="scope">
          <span style="color: blue;cursor: pointer;" @click="handleLook(scope.$index,scope.row)">
            {{ scope.row.number }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
      sortable
      align="center"
        prop="amount"
        label="支付价格/￥"
        width="110">
      </el-table-column>
      <el-table-column
      align="center"
        prop="consignee"
        label="付款人"
        width="100">
      </el-table-column>
      <el-table-column
      align="center"
        prop="phone"
        label="联系电话"
        width="130">
      </el-table-column>
      <el-table-column
      align="center"
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
      align="center"
        prop="payStatus"
        label="支付状态"
        width="100">
        <template slot-scope="scope">
          <span style="color: blue;" v-if="scope.row.payStatus==0">
            未付款
          </span>
          <span style="color: rgb(251, 72, 102);" v-if="scope.row.payStatus==1">
            已付款
          </span>
          <span style="color: rgb(255, 165, 74);" v-if="scope.row.payStatus==2">
            退款
          </span>
        </template>
      </el-table-column>
      <el-table-column
      align="center"
        prop="status"
        label="订单状态"
        width="100">
        <template slot-scope="scope">
          <span style="color: rgb(251, 72, 102);" v-if="scope.row.status==1">
            待付款
          </span>
          <span style="color: rgb(251, 72, 102);" v-if="scope.row.status==2">
            待配送
          </span>
          <span style="color: rgb(86, 155, 233);" v-if="scope.row.status==3">
            派送中
          </span>
          <span style="color: rgb(86, 155, 233);" v-if="scope.row.status==4">
            已完成
          </span>
          <span style="color: rgb(255, 165, 74);" v-if="scope.row.status==5">
            已取消
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
      <template slot-scope="scope">
        <el-button
        v-if="scope.row.status==2"
        icon="el-icon-edit"
          size="mini"
          type="warning"
          @click="handleEdit(scope.$index, scope.row)">发货</el-button>
        <el-button
        icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination">
      <Pagination :total="total" :pageSize="pageSize" @CurrentChange="getRecords" :page="page" obj="order"></Pagination>
    </div>
    </div>
  </div>
</template>

<script>
import Pagination  from '@/components/pagination/myPagination.vue';
// import BreadCrumb from '../../../components/Breadcrumb/breadCrumb.vue';
// import moment from 'moment'
import axios from 'axios' 
import dayjs from 'dayjs';
export default {
  components:{
    Pagination
  },
  data(){
    return{
      total:60,
      pageSize:6,
      page:1,
      formInline: {
        name: '',
        date: ''
      },
      tableData: []
    }
  },
  mounted(){
    axios({
      url:'http://localhost:8080/polycystic/order/page',
      method:'post',
      headers:{
        token:localStorage.getItem('jwt')
      },
      data:{
        page:this.page,
        pageSize:this.pageSize
      }
    }).then(res=>{
      this.tableData=res.data.data.records
    })
  },
  methods:{
    getRecords(val){
      this.tableData=val
    },
    selectHandle(selection){
      console.log(selection);
    },
    onSubmit() {
      let createTime=''
      if(this.formInline.date){
        createTime=dayjs(this.formInline.date).format('YYYY-MM-DD')
      }
      axios({
      url:'http://localhost:8080/polycystic/order/page',
      method:'post',
      headers:{
        token:localStorage.getItem('jwt')
      },
      data:{
        page:this.page,
        pageSize:this.pageSize,
        name:this.formInline.name,
        createTime:createTime
      }
    }).then(res=>{
      this.tableData=res.data.data.records
    })
      console.log('submit!', this.formInline.name);
    },
    handleEdit(index, row) {
        // 跳转编辑页面
        axios({
          url:`http://localhost:8080/polycystic/order/confirm?id=${row.id}`,
          method:'get',
          headers:{
            token:localStorage.getItem('jwt')
          },
        }).then(
          axios({
            url:'http://localhost:8080/polycystic/order/page',
            method:'post',
            headers:{
              token:localStorage.getItem('jwt')
            },
            data:{
              page:this.page,
              pageSize:this.pageSize
            }
          }).then(res=>{
            this.tableData=res.data.data.records
          })
        )
      },
    handleDelete(index, row) {
      console.log(index, row);
      axios({
        url:'http://localhost:8080/polycystic/goods/delete',
        method:'delete',
        headers:{
          token:localStorage.getItem('jwt')
        },
        data:{
          ids:row.id+''
        }
      }).then(res=>{
        console.log(res.data.data);
      })
    },
    toProductPage(){
      this.$router.push('/product/productPage')
    },
    // 查看商品详情
    handleLook(index,row){
      console.log(index, row);
      this.$router.push({
        name:'productPage',
        params:{
          goodInfo:row
        }
      })
    }
  }
}
</script>

<style lang="less" scoped> 
  .header{
    background: #FFF;
    margin-bottom: 20px;
    padding: 10px;
    .el-form-item{
      margin-bottom: 16px;
    }
    .group{
      border: 1px solid #eee;
      padding: 8px;
    }
  }
  .content{
    background: #FFF;
    .pagination{
      padding: 10px;
    }
  }
</style>